<template>
  <div class="home-container layout-pd">
    <div class="big-data-up">
      <div class="up-left">
        <SvgIcon name="ele-Timer" class="mr5"/>
        <span>{{ state.time.txt }}</span>
      </div>
      <div class="up-center">
        <span>大厦水电监控</span>
      </div>
      <div class="up-right">
        <el-dropdown size="small">
					<span class="el-dropdown-link">
						{{ state.dropdownActive }}
						<SvgIcon name="ele-ArrowDown" class="el-icon--right"/>
					</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(v, k) in state.dropdownList" :key="k">{{ v.label }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div class="ml15">
          <SvgIcon name="ele-Bell" class="mr5"/>
          <span>消息</span>
        </div>
        <div class="ml15">
          <SvgIcon name="ele-User" class="mr5"/>
          <span>个人</span>
        </div>
        <div class="ml15">
          <SvgIcon name="ele-SwitchButton" class="mr5"/>
          <span>返回</span>
        </div>
      </div>
    </div>
    <div class="big-data-down">
      <!--左边-->
      <div class="big-data-down-left">
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <dv-border-box10>

            </dv-border-box10>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <dv-border-box10>

            </dv-border-box10>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <dv-border-box10>

            </dv-border-box10>
          </div>
        </div>
      </div>
<!--      &lt;!&ndash;      中间&ndash;&gt;10,20 10,40 80,40 80,60-->
      <div class="big-data-down-center">
        <div class="big-data-down-center-one">
          <div class="big-data-down-center-one-content" ref="rightChartData5">
            <div class="line">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" version="1.1" >
                <polyline :points="`${count1},${count2},${count3},${count4},${count5},${count6},${count7},${count8}`" stroke-width="2" stroke-dasharray="10 10" fill="none" stroke="#CCF3FF" stroke-linecap="round"  />
                <polyline points="0,10 0,40 0,40 0,100" stroke-width="2" stroke-dasharray="10 10" fill="none" stroke="#0487FF" stroke-linecap="round"  />
                <polyline points="200,0 0,0 60,60 100,60" stroke-width="2" stroke-dasharray="10 10" fill="none" stroke="#CCF3FF" stroke-linecap="round"  />
                <polyline points="200,0 0,0 0,60 100,60" stroke-width="2" stroke-dasharray="10 10" fill="none" stroke="#0487FF" stroke-linecap="round"  />
              </svg>
            </div>
          </div>
        </div>
        <div class="big-data-down-center-two">

        </div>
      </div>
      <!--      右边-->
      <div class="big-data-down-right">
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <dv-border-box10>

            </dv-border-box10>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <dv-border-box10>

            </dv-border-box10>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <dv-border-box10>

            </dv-border-box10>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
// import { BorderBox10 as DvBorderBox10 } from '@kjgl77/datav-vue3'
// const borderRef = ref<InstanceType<typeof DvBorderBox1>>()
const count1=ref(0)
const count2=ref(0)
const count3=ref(0)
const count4=ref(40)
const count5=ref(0)
const count6=ref(40)
const count7=ref(0)
const count8=ref(100)
const state = reactive({
  time: {
    txt: '2021-09-01 00:00:00',
    timer: null
  },
  dropdownActive: '全部',
  dropdownList: [
    {
      label: '全部'
    },
    {
      label: '未读'
    },
    {
      label: '已读'
    }
  ]
})


function updateTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以加1
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  state.time.txt = formattedTime;
}

setInterval(updateTime, 1000); // 每秒更新一次时间
</script>


<style scoped lang="scss">
.home-container {
  height: 100%;
  width: 100%;
  background: url('../../assets/bg.jpg') no-repeat;
  overflow: hidden;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  font-size: 13px;

  .big-data-up {
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: #43bdf0;
    overflow: hidden;

    .up-left {
      width: 30%;
      font-style: italic;
    }

    .up-center {
      width: 40%;
      display: flex;
      justify-content: center;
      font-size: 20px;
      letter-spacing: 5px;
      background-image: -webkit-linear-gradient(left, #43bdf0, #c0d1f2 25%, #43bdf0 50%, #c0d1f2 75%, #43bdf0);
      -webkit-text-fill-color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
      background-size: 200% 100%;
      animation: masked-animation 4s infinite linear;
      -webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
      @keyframes masked-animation {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -100% 0;
        }
      }
      position: relative;

      &::after {
        content: '';
        width: 50%;
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        border: 1px transparent solid;
        border-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), #43bdf0) 1 10;
      }

      span {
        cursor: pointer;
      }
    }

    .up-right {
      width: 30%;
      justify-content: flex-end;
      display: flex;
      align-items: center;

      .ml15:hover {
        cursor: pointer;
      }

      :deep(.el-dropdown) {
        font-size: 13px !important;
        color: #43bdf0;
        cursor: pointer;
      }
    }
  }
  .big-data-down {
    flex: 1;
    overflow: hidden;
    display: flex;
    .big-data-down-left,
    .big-data-down-right {
      width: 30%;
      display: flex;
      flex-direction: column;
      .flex-warp-item {
        padding: 0 7.5px 15px 15px;
        width: 100%;
        height: 33.33%;
        .flex-warp-item-box {
          width: 100%;
          height: 100%;
          background: rgba(22, 34, 58, 0.4);
          display: flex;
          flex-direction: column;
          padding: 15px;
          .flex-title {
            margin-bottom: 15px;
            color: #c0d1f2;
            display: flex;
            justify-content: space-between;
            .flex-title-small {
              font-size: 12px;
            }
          }
          .flex-content {
            flex: 1;
            font-size: 12px;
          }
          .flex-content-overflow {
            overflow: hidden;
          }
        }
      }
    }
    .big-data-down-center {
      width: 40%;
      display: flex;
      flex-direction: column;
      .big-data-down-center-one {
        height: 66.67%;
        padding: 0 7.5px 15px;
        .big-data-down-center-one-content {
          height: 100%;
          position: relative;
          .fixed-top,
          .fixed-right,
          .fixed-bottom,
          .fixed-left {
            position: absolute;
            width: 100px;
            height: 100px;
            display: flex;
            cursor: pointer;
            .circle {
              position: absolute;
              border-radius: 50%;
              background: rgba(0, 0, 0, 0.01);
              z-index: 10;
            }
            .text-box {
              position: relative;
              z-index: 11;
              color: #c0d1f2;
              margin: auto;
              text-align: center;
              font-size: 12px;
              i {
                font-size: 28px;
                margin-bottom: 10px;
              }
            }
          }
          .fixed-top {
            left: 20px;
            top: 20px;
          }
          .fixed-right {
            right: 20px;
            top: 20px;
          }
          .fixed-bottom {
            right: 20px;
            bottom: 20px;
          }
          .fixed-left {
            left: 20px;
            bottom: 20px;
          }
          .circle:nth-of-type(1) {
            width: 100px;
            height: 95px;
            animation: turnAround 6s infinite linear;
            box-shadow: 0 0 1px 0 #869fe4, inset 0 0 10px 0 #869fe4;
          }
          .circle:nth-of-type(2) {
            width: 95px;
            height: 100px;
            animation: turnAround 10s infinite linear;
            box-shadow: 0 0 1px 0 #3397f2, inset 0 0 10px 0 #3397f2;
          }
          .circle:nth-of-type(3) {
            width: 110px;
            height: 100px;
            animation: turnAround 5s infinite linear;
            box-shadow: 0 0 1px 0 #3eaadc, inset 0 0 10px 0 #3eaadc;
          }
          .circle:nth-of-type(4) {
            width: 100px;
            height: 110px;
            animation: turnAround 15s infinite linear;
            box-shadow: 0 0 1px 0 #09f, inset 0 0 10px 0 #09f;
          }
          @keyframes turnAround {
            100% {
              transform: rotate(360deg);
            }
          }

          .line{
            height: 90%;
            border-radius: 10px;
            overflow: hidden;
            //border: 4px solid rgba(52,152,219, 0.1);
            polyline {
              transition: all 1s linear;
              animation-duration: 60s;
              animation-timing-function: linear;
              animation-iteration-count: infinite;
              animation-name: flow;
            }

            @keyframes flow {
              from {
                stroke-dashoffset: 2000; // 通过这个值来控制流动速度
              }
              to {
                stroke-dashoffset: 0;
              }
            }

          }
        }
      }
      .big-data-down-center-two {
        padding: 0 7.5px 15px;
        height: 33.33%;
        .flex-warp-item-box {
          width: 100%;
          height: 100%;
          background: rgba(22, 34, 58, 0.4);
          display: flex;
          flex-direction: column;
          padding: 15px;
          .flex-title {
            margin-bottom: 15px;
            color: #c0d1f2;
            display: flex;
            justify-content: space-between;
            .flex-title-small {
              font-size: 12px;
            }
          }
          .flex-content {
            flex: 1;
            font-size: 12px;
            display: flex;
            height: calc(100% - 30px);
            .flex-content-left {
              display: flex;
              flex-wrap: wrap;
              width: 120px;
              height: 100%;
              .monitor-item {
                width: 50%;
                display: flex;
                align-items: center;
                .monitor-wave {
                  cursor: pointer;
                  width: 40px;
                  height: 40px;
                  position: relative;
                  background-color: #43bdf0;
                  border-radius: 50%;
                  overflow: hidden;
                  text-align: center;
                  &::before,
                  &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    width: 40px;
                    height: 40px;
                    background: #f4f4f4;
                    animation: roateOne 10s linear infinite;
                    transform: translateX(-50%);
                    z-index: 1;
                  }
                  &::before {
                    bottom: 10px;
                    border-radius: 60%;
                  }
                  &::after {
                    bottom: 8px;
                    opacity: 0.7;
                    border-radius: 37%;
                  }
                  .monitor-z-index {
                    position: relative;
                    z-index: 2;
                    color: #4eb8ff;
                    display: flex;
                    align-items: center;
                    height: 100%;
                    justify-content: center;
                    font-weight: bold;
                  }
                }
                @keyframes roateOne {
                  0% {
                    transform: translate(-50%, 0) rotateZ(0deg);
                  }
                  50% {
                    transform: translate(-50%, -2%) rotateZ(180deg);
                  }
                  100% {
                    transform: translate(-50%, 0%) rotateZ(360deg);
                  }
                }
                .monitor-active {
                  background-color: #22bc76;
                  .monitor-z-index {
                    color: #22bc76;
                  }
                }
              }
            }
            .flex-content-right {
              flex: 1;
            }
          }
        }
      }
    }
  }
}
</style>

